<template>
  <div>
    <navTop text="编辑资料" />
    <div class="img">
      <img :src="$axios.defaults.baseURL+datas.head_img" v-if="datas.head_img" />
      <img src="../../assets/logo.png" v-else />
      <van-uploader :after-read="afterRead" />
    </div>
    <div class="texts">
      <Texts textLeft="昵称" :textRight="datas.nickname" @back="show=true" />
      <Texts textLeft="密码" textRight="......" @back="isShow=true" />
      <Texts textLeft="性别" :textRight="datas.gender==1?'男':'女'" @back="isShowS=true" />
    </div>
    <div class="span">
      <span>上次更改时间：{{datass}}</span>
    </div>
    <Btn text="保存" @Btn="modification" :fy="fy" />
    <van-dialog v-model="show" title="修改昵称" show-cancel-button @confirm="nicknametext">
      <van-field v-model="newnickname" :placeholder="datas.nickname" />
    </van-dialog>
    <van-dialog v-model="isShow" title="修改密码" show-cancel-button @confirm="passwordtext">
      <van-field v-model="newpassword" placeholder="......" type="password" />
    </van-dialog>
    <van-action-sheet v-model="isShowS" :actions="actions" @select="onSelect" cancel-text="取消" />
  </div>
</template>

<script>
// import Texts from "../../components/text";
// import navTop from "../../components/navTop";
// import Btn from "../../components/AutBtn";
export default {
  components: {
    Texts: () => import("../../components/text"),
    navTop: () => import("../../components/navTop"),
    Btn: () => import("../../components/AutBtn")
  },
  data() {
    return {
      datas: {},
      passwordruner: "^[a-zA-Z0-9]{3,11}$",
      nicknameruner: "^[\\u4e00-\\u9fa5]{2,11}$",
      fy: true,
      datanow: "",
      datass: "",
      isShowS: false,
      isShow: false,
      show: false,
      newpassword: "",
      newnickname: "",
      objGender: {},
      objImg: {},
      actions: [
        { name: "男", gender: 1 },
        { name: "女", gender: 0 }
      ]
    };
  },
  methods: {
    nicknametext() {
      // console.log(12345);

      const nick = new RegExp(this.nicknameruner);
      // nick.test(this.newnickname);
      if (nick.test(this.newnickname)) {
        this.datas.nickname = this.newnickname;
      } else {
        this.$toast.fail("请输入2-11位的中文昵称");
        // return;
        // this.nicknametext();
      }
    },
    passwordtext() {
      const pass = new RegExp(this.passwordruner);
      // nick.test(this.newnickname);
      if (pass.test(this.newpassword)) {
        this.datas.password = this.newpassword;
      } else {
        this.$toast.fail("请输入3-11位的数字密码");
        // return;
        // this.nicknametext();
      }
    },
    modification() {
      // console.log(this.datas.head_img, this.datas.gender);
      // head_img: this.datas.head_img,
      //   gender: this.datas.gender
      this.eaitdata({
        head_img: this.datas.head_img,
        password: this.datas.password,
        nickname: this.datas.nickname,
        gender: this.datas.gender
      });
      this.datanow = new Date().toTimeString().split(" ")[0];
      localStorage.setItem("datanow", this.datanow);
      this.datass = localStorage.getItem("datanow");
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      const filedata = new FormData();
      filedata.append("file", file.file);
      // console.log(filedata.get("file"));
      // console.log(filedata);
      // console.log(file.file);
      // console.log(file);
      this.$axios({
        url: "/upload",
        method: "post",
        headers: {
          Authorization: "Bearer " + localStorage.getItem("token")
        },
        data: filedata
      }).then(res => {
        // console.log(res.data.data.url);
        this.objImg = { head_img: res.data.data.url };
        this.datas.head_img = res.data.data.url;
      });
    },
    onSelect(number) {
      // console.log(number.gender);
      this.objGender = {
        gender: number.gender
      };
      this.datas.gender = number.gender;
      this.isShowS = false;
    },
    apply() {
      this.$axios({
        url: "/user/" + localStorage.getItem("userId"),
        method: "get",
        headers: {
          Authorization: "Bearer " + localStorage.getItem("token")
        }
      })
        .then(res => {
          // console.log(res.data.message);
          if (res.data.message == "获取成功") this.datas = res.data.data;

          // console.log(this.datanow);
        })
        .catch(err => {
          this.$dialog.alert({ message: err });
        });
    },
    eaitdata(data) {
      this.$axios({
        url: "/user_update/" + localStorage.getItem("userId"),
        method: "post",
        headers: {
          Authorization: "Bearer " + localStorage.getItem("token")
        },
        data: data
      }).then(res => {
        // console.log(res);
        if (res.data.message == "修改成功") {
          localStorage.setItem("nickname", res.data.data.nickname);
          localStorage.setItem("img", res.data.data.head_img);
          this.$dialog.alert({ message: res.data.message });
          this.apply();
        } else {
          this.$dialog.alert({ message: res.data.message });
          return;
        }
      });
    }
  },
  created() {
    this.datass = localStorage.getItem("datanow");
    // console.log(this.datass);
    this.apply();
  }
};
</script>

<style lang="less" scoped>
// .text {
//   border-radius: 10px;
//   width: 320px;
//   background-color: #fff;
//   margin: 0 18px;
// }
.span {
  text-align: center;
  font-size: 12px;
  color: #ccc;
}
.img {
  width: 60px;
  height: 60px;

  margin: 40px auto;
  position: relative;
  /deep/ .van-uploader {
    position: absolute;
    margin: 0 0 0 -22.222vw;
    opacity: 0;
  }
  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }
}
.texts {
  // border-radius: 10px;
  // width: 320px;
  // background-color: #fff;
  margin: 0 3px 10px 3px;
  padding: 15px;
  border-radius: 20px 20px;
  border: 2px solid #eee;
}
</style>
